<template>
  <div>
    <a-button v-if="displayType === 'BUTTON'" type="primary" @click="showModal">{{ text }}</a-button>
    <a class="gb-display-block" v-if="displayType === 'LINK'" @click="showModal">{{ text }}</a>
    <a-modal 
      :title="text+'检测项目'"
      centered
      :maskClosable="false"
      :width="800"
      v-model="visible"
      :okText="$t('modal_submit')"
      :cancelText="$t('modal_cancel')"
      @ok="handleOk"
      :okButtonProps="okButtonProps"
    >  
      <a-form :form="form">
        <a-form-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :colon="false" label="检测项目代码"
        >
          <a-input
            v-decorator="[
              'testCode',
              { initialValue:row.testCode, rules: [{ required: true, message: $t('please_input') + '检测项目代码' + $t('exclamation_mark') }] }
            ]"
            placeholder="检测项目代码"
          />
        </a-form-item>
        
        <a-form-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :colon="false" label="检测项目名称"
        >
          <a-input
            v-decorator="[
              'testName',
              { initialValue:row.testName, rules: [{ required: true, message: $t('please_input') + '检测项目名称' + $t('exclamation_mark') }] }
            ]"
            placeholder="检测项目名称"
          />
        </a-form-item>

        <a-form-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :colon="false" label="生信分析流程"
        >
          <a-input
            v-decorator="[
              'bioFlow',
              { initialValue:row.bioFlow,  rules: [{ required: true, message: $t('please_input') + '生信分析流程' + $t('exclamation_mark') }] }
            ]"
            placeholder="生信分析流程"
          />
        </a-form-item>

        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false" label="报告" >
          <DictRadio dictCode="TRUE_FALSE_IND"
            v-decorator="[
              'isReporting',
              { initialValue: row.isReporting == undefined ? true : row.isReporting, rules: [{ required: true, message: $t('please_input') + '报告' + $t('exclamation_mark') }] }, 
            ]"
          />
        </a-form-item>

        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false" label="生信文件">
          <DictRadio dictCode="TRUE_FALSE_IND"
            v-decorator="[
              'isBioFile',
              { initialValue: row.isBioFile == undefined ? false : row.isBioFile, rules: [{ required: true, message: $t('please_input') + '生信文件' + $t('exclamation_mark') }] }, 
            ]"
          />
        </a-form-item>

      </a-form>
    </a-modal>
  </div>
</template>
<script>
import axios from 'axios'

export default {
  props: {
    text: { type: [String] },
    displayType: { type: [String], default: 'BUTTON' },
    callback: { type: [Function] },
    row: { type: [Object], default: () => { return {} } },
    url: { type: [String] },
  },
  data() {
    return {
      form: this.$form.createForm(this, {name: this._uid}),
      visible: false,
      okButtonProps: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      ts: 0,
    }
  },
  methods: {
    showModal() {
      this.form.resetFields();
      this.visible = true
      this.okButtonProps = {}
      this.ts = new Date().getTime()
    },
    handleOk() {
      this.form.validateFields((err, formValue) => {
        if (err) {
          return;
        }
        if (!formValue.userPosition) {
          formValue.userPosition = ''
        }

        this.okButtonProps ={ props: {disabled: true} }
        // submit
        axios({
          method: 'post',
          url: this.url,
          data: {
            id: this.row.id,
            ...formValue
          },
        }).then(() => {
          this.visible = false
          if(this.callback) {
            this.callback();
          }
          this.$success({
            title: this.$t('success_message'),
            content: this.$t('submit_success'),
            okText: this.$t('modal_ok'),
          });
        }).catch(() => {
          this.okButtonProps = {}
        });
        
      });
    },
  }
}
</script>
